<template>
  <view class="container">
    <!-- 池塘折线图 -->
    <view class="header">
      <text class="title">🌊 池塘历史数据曲线</text>
    </view>
    <view class="content">
      <view class="chart-container">
        <qiun-data-charts
          type="line"
          :opts="pondOpts"
          :chartData="pondChartData"
        />
      </view>
    </view>

    <!-- 果园折线图 注意此处当时opt起名时与花卉写反了,但是数据正确-->
    <view class="header" style="margin-top:40rpx;">
      <text class="title">🍎 果园历史数据曲线</text>
    </view>
    <view class="content">
      <view class="chart-container">
        <qiun-data-charts
          type="line"
          :opts="flowerOpts"	
          :chartData="flowerChartData"
        />
      </view>
    </view>
	
    <!-- 花卉折线图 注意此处当时opt起名时与果园写反了,但是数据正确-->
    <view class="header" style="margin-top:40rpx;">
      <text class="title"> 🌸 花卉历史数据曲线</text>
    </view>
    <view class="content">
      <view class="chart-container">
        <qiun-data-charts
          type="line"
          :opts="treeOpts"  
          :chartData="treeChartData"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'

// ---------------- 池塘图表 ----------------
const pondChartData = ref({ categories: [], series: [] })
const pondOpts = ref({
  color: ['#1890FF', '#2FC25B'],
  padding: [15, 10, 0, 15],
  dataLabel: false,
  dataPointShape: true,
  legend: { show: true, position: 'top' },
  xAxis: { disableGrid: true, rotateLabel: true },
  yAxis: { gridType: 'dash', splitNumber: 4, min: 0 },
  extra: { line: { type: 'straight', width: 2, activeType: 'hollow' } }
})

const getPondHistoryCurve = async () => {
  try {
    const res = await uni.request({
      url: 'http://localhost:8080/device/show/pondHistoryCurve',
      method: 'POST',
      header: { Authorization: `Bearer ${uni.getStorageSync('token')}` },
    })
    const data = res.data
    if (data.temp && data.level) {
      const categories = data.temp.map(i => i.createdate.slice(11, 16))
      const tempSeries = data.temp.map(i => i.value)
      const levelSeries = data.level.map(i => i.value)

      pondChartData.value = {
        categories,
        series: [
          { name: '温度(°C)', data: tempSeries, type: 'line', color: '#1890FF', smooth: true },
          { name: '水位(mm)', data: levelSeries, type: 'line', color: '#2FC25B', smooth: true }
        ]
      }
    }
  } catch (e) {
    console.error('请求失败：', e)
  }
}

// ---------------- 花卉图表 ----------------
const treeChartData = ref({ categories: [], series: [] })
const treeOpts = ref({
  color: ['#FF7F50', '#32CD32', '#1E90FF', '#FFD700'],
  padding: [15, 10, 0, 15],
  dataLabel: false,
  dataPointShape: true,
  legend: { show: true, position: 'top' },
  xAxis: { disableGrid: true, rotateLabel: true },
  yAxis: { gridType: 'dash', splitNumber: 4, min: 0 },
  extra: { line: { type: 'straight', width: 2, activeType: 'hollow' } }
})

const getTreeHistoryCurve = async () => {
  try {
    const res = await uni.request({
      url: 'http://localhost:8080/device/show/flowerHistoryCurve',
      method: 'POST',
      header: { Authorization: `Bearer ${uni.getStorageSync('token')}` },
    })
    const data = res.data
    if (data.temp && data.raindrops && data.soilM && data.humi) {
      const categories = data.temp.map(i => i.createdate.slice(11, 16))
      const tempSeries = data.temp.map(i => i.value)
      const rainSeries = data.raindrops.map(i => i.value)
      const soilSeries = data.soilM.map(i => i.value)
      const humiSeries = data.humi.map(i => i.value)

      treeChartData.value = {
        categories,
        series: [
          { name: '温度(°C)', data: tempSeries, type: 'line', color: '#FF7F50', smooth: true },
          { name: '降雨量(mm)', data: rainSeries, type: 'line', color: '#32CD32', smooth: true },
          { name: '土壤湿度', data: soilSeries, type: 'line', color: '#1E90FF', smooth: true },
          { name: '空气湿度(%)', data: humiSeries, type: 'line', color: '#FFD700', smooth: true }
        ]
      }
    }
  } catch (e) {
    console.error('请求失败：', e)
  }
}

// ---------------- 果园图表 ----------------
const flowerChartData = ref({ categories: [], series: [] })
const flowerOpts = ref({
  color: ['#FF6347', '#3CB371', '#1E90FF'], // 温度、降雨量、土壤湿度
  padding: [15, 10, 0, 15],
  dataLabel: false,
  dataPointShape: true,
  legend: { show: true, position: 'top' },
  xAxis: { disableGrid: true, rotateLabel: true },
  yAxis: { gridType: 'dash', splitNumber: 4, min: 0 },
  extra: { line: { type: 'straight', width: 2, activeType: 'hollow' } }
})

const getFlowerHistoryCurve = async () => {
  try {
    const res = await uni.request({
      url: 'http://localhost:8080/device/show/treeHistoryCurve',
      method: 'POST',
      header: { Authorization: `Bearer ${uni.getStorageSync('token')}` },
    })
    const data = res.data
    if (data.temp && data.raindrops && data.soilM) {
      const categories = data.temp.map(i => i.createdate.slice(11, 16))
      const tempSeries = data.temp.map(i => i.value)
      const rainSeries = data.raindrops.map(i => i.value)
      const soilSeries = data.soilM.map(i => i.value)

      flowerChartData.value = {
        categories,
        series: [
          { name: '温度(°C)', data: tempSeries, type: 'line', color: '#FF6347', smooth: true },
          { name: '降雨量(mm)', data: rainSeries, type: 'line', color: '#3CB371', smooth: true },
          { name: '土壤湿度', data: soilSeries, type: 'line', color: '#1E90FF', smooth: true }
        ]
      }
    }
  } catch (e) {
    console.error('请求失败：', e)
  }
}

// 页面加载时请求三个接口
onMounted(() => {
  getPondHistoryCurve()
  getTreeHistoryCurve()
  getFlowerHistoryCurve()
})

// 下拉刷新时刷新三个图表
onPullDownRefresh(() => {
  getPondHistoryCurve()
  getTreeHistoryCurve()
  getFlowerHistoryCurve()
})
</script>

<style>
.container {
  background: #f8f8f8;
  min-height: 100vh;
  padding: 20rpx;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  padding: 20rpx;
  background-color: #f7f7f7;
}

.chart-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style>
